<template>
  <div>
    <h1>App</h1>
    <hr />
    <!-- 点击修改浏览器地址栏的路径或hash值,从而让路由组件切换 -->
    <router-link to="/home" active-class="done">home</router-link> <br />
    <!-- 默认是添加历史记录,增加了replace属性,则改为替换历史记录 -->
    <router-link to="/about" active-class="done" replace>about</router-link>
    <br />
    <!-- router-view决定了路由组件渲染的位置 -->
    <keep-alive :include="['h']">
      <!-- 渲染在当前router-view位置的组件，看不到的时候，不会被卸载了 
        `. keep-alive 上不写include,则router-view位置渲染的所有路由组件都会缓存
        2. keep-alive 写了include,include的值是组件的name的值,则当前组件缓存,其他组件不缓存
        3. keep-alive 写了include,include的值是一个数组,数组里面存储了组件的name的值,则这些组件会缓存,其他组件不缓存
      
      -->
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {}
</script>

<style>
.router-link-active {
  color: skyblue;
}

.done {
  background-color: green;
}
</style>
